var $image = $('#image');
let layer = layui.layer
    // - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);
// 上传图片
// 需求1：当上传按钮被点击触发file的点击事件
$('#chooseImageBtn').on('click', function() {
        $('#chooseImageInp').click()
    })
    // 需求2：当file文件发生改变的时候
    // 当file的文件被修改的时候
    // 将数据获取
    // 将数据存在虚拟地址里
$('#chooseImageInp').on('change', function() {
        let file = this.files[0]
            // 先判断一下。用户是否点了取消，如果用户点了取消，file的值就是undefined，URL拿到undefined会报错
        if (file == undefined) {
            return layer.msg('上传头像不能为空')
        }
        let newURL = URL.createObjectURL(file)
            // 删除旧的裁剪区域，修改图片的路径，添加新的裁剪区域
        $image.cropper('destroy').attr('src', newURL).cropper(option)
    })
    // 需求3：确定按钮被点击的时候
    // 先将路径改成base64格式的
    // 发送ajax请求
    //将虚拟地址改编码格式发送给服务器
    // 判断服务器响应的是否正确，错误的话，将报错信息展示
$('#uploadBtn').on('click', function() {
    let dataURL = $image.cropper('getCroppedCanvas', { width: 30, height: 30 }).toDataURL('image/png')
    axios({
        url: '/my/update/avatar',
        method: 'POST',
        // 服务器要求传vatar,encodeURIComponent()将url改成作为url进行编码
        data: "avatar=" + encodeURIComponent(dataURL)
    }).then(({ data: res }) => {
        //成功回调
        if (res.status != 0) {
            return layer.msg(res.message)
        }
        layer.msg('恭喜你，修改头像成功')
        window.parent.getUserInfo()
    });
})